<!DOCTYPE html>

<html>
  <head>
      <meta charset="UTF-8">
      <title>动态插槽名</title>
      <link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
      <style>
      </style>
      <script src="/javascripts/vue@3.0.11.js" ></script>
  </head>
  <body>

    <div id="app">
        <base-layout>
            <template v-slot:[random]>
                <div class="border border-danger">
                    老秦怎么那么开心呢？
                </div>
            </template>
        </base-layout>
        <hr>
        <input type="radio" v-model="slot_name" value="header"> HEADER
        <input type="radio" v-model="slot_name" value="default"> MAIN
        <input type="radio" v-model="slot_name" value="footer"> FOOTER
        <p>{{slot_name}}</p>
        <!-- 感谢吴棋棋吴总的贡献 -->
        <base-layout>
            <template v-slot:[slot_name]>
                <div class="border border-danger">
                    老秦怎么那么开心呢？因为老吴有贡献
                </div>
            </template>
        </base-layout>
    </div>

    <script>
        const app = Vue.createApp({
            data(){
                return { slot_name : 'default' }
            },
            computed:{
                random(){
                    let names = [ 'header' , 'default' , 'footer' ];
                    let index = Math.random() * names.length | 0 ;
                    let name = names[ index ];
                    console.log( name );
                    return name ;
                }
            }
        });

        app.component( 'BaseLayout' , {
            template: `<div class="border layout">
                            <header>
                                <slot name="header">HEADER</slot>
                            </header>
                            <main>
                                <!-- 若未显式指定名称则默认为 default (同一个组件中只能有一个) -->
                                <slot>MAIN</slot>
                            </main>
                            <footer>
                                <slot name="footer">FOOTER</slot>
                            </footer>
                          </div>`
        });

        app.mount( '#app' );
    </script>

  </body>
</html>